import * as React from 'react'
import { InputNumber, Button, Form } from 'antd/es'
import { FormComponentProps } from 'antd/es/form/Form'
const FormItem = Form.Item

interface QuizSubmitBoxProps extends FormComponentProps {
    quizId: number,
    assignmentId: number,
    quizItemId: number,
    selectQuizItemId: any,
    isExample: boolean,
    exampleAnswer: any,
    answer: any,
    questionDescription: any,
    logicQuizSubmission: any,
    logicReviewQuiz: any,
    updateLogicQuizItemAnswer: Function,
    submitLogicQuizItemAnswer: Function,
    updateQuizItemId: Function,
    getLogicQuizItem: Function,
}

class QuizSubmitBox extends React.Component<QuizSubmitBoxProps, any> {
    componentDidMount = () => {
        const { assignmentId, quizId, selectQuizItemId } = this.props
        this.props.getLogicQuizItem(assignmentId, quizId, selectQuizItemId, () => {
            const { exampleAnswer, answer } = this.props
            this.props.form.setFieldsValue({
                answer: exampleAnswer || answer
            })
        })
    }

    componentWillReceiveProps = (nextProps: any) => {
        const { quizItemId, exampleAnswer, answer } = nextProps
        if (quizItemId === this.props.quizItemId) {
            return false
        }
        this.props.form.setFieldsValue({
            answer: exampleAnswer || answer
        })
        return true
    }

    handleSubmit = (e: any) => {
        e.preventDefault()

        this.props.form.validateFields((err: any, fieldsValue: any) => {
            if (err) {
                return
            }
            const { quizItemId, isExample, selectQuizItemId, assignmentId, quizId } = this.props

            if (!isExample) {
                this.props.submitLogicQuizItemAnswer({
                    assignmentId,
                    'answers': [
                        { quizItemId, answer: fieldsValue.answer }
                    ]
                })
            }
            if (!this.hasNext()) {
                return
            }
            const selectItemId = parseInt(selectQuizItemId, 10) + 1
            this.props.updateQuizItemId(selectItemId)
            this.props.getLogicQuizItem(assignmentId, quizId, selectItemId)

        })
    }

    hasNext = () => {
        const { logicQuizSubmission, selectQuizItemId } = this.props
        let count = logicQuizSubmission.twlogicQuizItemAnswer ? logicQuizSubmission.twlogicQuizItemAnswer.length : 0
        let current = selectQuizItemId || 0
        return parseInt(current, 10) < count
    }

    getButtonText = () => {
        const { isExample } = this.props
        if (isExample) {
            return '查看下一题'
        }
        return this.hasNext() ? '提交并进入下一题' : '提交并返回'
    }

    handleAnswerChange = (answer: any) => {
        const { quizItemId } = this.props
        this.props.updateLogicQuizItemAnswer({ answer, quizItemId })
        return answer
    }
    render() {
        const { questionDescription, form, logicReviewQuiz, isExample } = this.props
        const { getFieldDecorator } = form
        let buttonText = this.getButtonText()

        return <div>
            <div style={{ lineHeight: '4' }}>{questionDescription}</div>
            <Form layout='inline' onSubmit={this.handleSubmit}>
                <FormItem />
                <FormItem>
                    {getFieldDecorator('answer', {
                        rules: [{ required: true, message: '答案不能为空' }],
                        getValueFromEvent: this.handleAnswerChange

                    })(<InputNumber
                        disabled={isExample || logicReviewQuiz.id > 0}
                        placeholder='请输入答案' style={{ width: 100 }} />)}
                </FormItem>
                <FormItem>
                    <Button
                        type='primary'
                        htmlType='submit'
                        disabled={logicReviewQuiz.id > 0}>
                        {buttonText}
                    </Button>
                </FormItem>
            </Form>
        </div>
    }
}

export default Form.create<QuizSubmitBoxProps>()(QuizSubmitBox)